import React, { Component, createRef } from "react";

// 非受控组件由react自己来控制
// 先获取到input的表单元素

class App extends Component {
  // createRef函数执行，会返回一个地址引用(它会指向某一块内存)
  ipt = createRef();

  handleClick() {
    // console.log(document.querySelector("input").value);
    // console.log(this.ipt.current);
    console.log(this.ipt.current.value);
  }

  render() {
    return (
      <>
        <h2>非受控组件</h2>
        {/* ref={this.ipt}让input元素也指向那一块内存 */}
        {/* 非受控组件使用defaultValue作为默认值 */}
        <input type="text" ref={this.ipt} defaultValue="123" />
        <button onClick={this.handleClick.bind(this)}>btn</button>
      </>
    );
  }
}

export default App;
